<template>
  <div class="gjl-meeting-calendar">
    <div class="calendar-box">
      <div class="calendar-box-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="calendar-header">
              <div class="title">{{ title }}</div>
              <div class="time-change-box">
                <div class="change-left change-btn" @click="timeChange(-1)">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="change-text" v-show="chooseModel == 'date'">
                  {{ userChooseDate.year }}年第{{ userChooseDate.day }}天
                </div>
                <div class="change-text" v-show="chooseModel == 'week'">
                  {{ userChooseDate.year }}年第{{ userChooseDate.week }}周
                </div>
                <div class="change-right change-btn" @click="timeChange(1)">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="time-model-box">
                <div
                  class="model-li"
                  :class="{ active: chooseModel == item.model }"
                  v-for="(item, index) in modelList"
                  :key="index"
                  @click="changeModel(item)"
                >
                  <div class="text">{{ item.text }}</div>
                </div>
              </div>
              <div class="calendar-picker-box">
                <el-date-picker
                  v-model="pickerValue"
                  :type="chooseModel"
                  :format="
                    chooseModel == 'week' ? 'yyyy 第 WW 周' : 'yyyy-MM-dd'
                  "
                  placeholder="选择日期"
                  @change="changePicker"
                  popper-class="calendar-date-pick"
                  ref="calendarPick"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
              <div class="right-search">
                <div class="search-box">
                  <div class="search-inner">
                    <div class="left">
                      <el-input
                        v-model="keyword"
                        placeholder="请输入会议室全称搜索"
                        @change="search"
                      ></el-input>
                    </div>
                    <div class="right" @click="search">
                      <i class="el-icon-search"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="calendar-content">
            <div v-show="chooseModel == 'date'">
              <el-table
                :data="calendarData"
                :border="true"
                :height="tableHeight"
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column
                  label=""
                  width="150"
                  :border="false"
                  :resizable="false"
                  fixed="left"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="room-name">{{ scope.row.roomName }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="item.mouthDay"
                  min-width="80"
                  v-for="(item, index) in dayList"
                  :resizable="false"
                  :key="item.date"
                >
                  <template slot="header" slot-scope="scope">
                    <div class="date-text">
                      <div class="before">{{ item.time }}</div>
                      <!-- <div class="after">{{ item.week }}</div> -->
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div class="cover-box">
                      <div class="time-box" v-if="scope.row.timeMoment">
                        <el-popover
                          placement="bottom"
                          trigger="click"
                          @show="showPopover"
                          @hide="hidePopover"
                          popper-class="time-popper"
                          :ref="`dayPopper-${scope.row.roomName}-${index}`"
                          v-if="scope.row.timeMoment[index].moment.length"
                        >
                          <div class="time-detail">
                            <div class="detail-header">
                              <div class="left">
                                {{
                                  selectItem.info && selectItem.info.roomName
                                }}
                              </div>
                              <div
                                class="right"
                                @click="
                                  closePopper({
                                    key: `dayPopper-${scope.row.roomName}-${index}`
                                  })
                                "
                              >
                                <i class="el-icon-close"></i>
                              </div>
                            </div>
                            <div class="detail-content">
                              <div class="text-ul">
                                <div class="text-li">
                                  申请单位：{{
                                    (selectItem.info &&
                                      selectItem.info.belongOrgNames) ||
                                      "未填"
                                  }}
                                </div>
                                <div class="text-li">
                                  会议时间：{{ selectItem.t || "未填" }}
                                </div>
                                <div class="text-li">
                                  参与人数：{{
                                    (selectItem.info &&
                                      selectItem.info.meetingNumber) ||
                                      "未填"
                                  }}
                                </div>
                                <div class="text-li">
                                  联系人：{{
                                    (selectItem.info &&
                                      selectItem.info.linkUser) ||
                                      "未填"
                                  }}
                                </div>
                                <div class="text-li">
                                  联系电话：{{
                                    (selectItem.info &&
                                      selectItem.info.linkUserPhone) ||
                                      "未填"
                                  }}
                                </div>
                              </div>
                            </div>
                          </div>
                          <template slot="reference">
                            <div
                              class="time-item"
                              :class="{
                                active: false,
                                select:
                                  userChooseTime[
                                    `${userChooseDate.date} ${item.time}(${scope.row.roomName})`
                                  ]
                              }"
                              @click="
                                chooseTime({
                                  row: scope.row,
                                  index,
                                  item: userChooseDate,
                                  item2: scope.row.timeMoment[index]
                                })
                              "
                              @contextmenu.prevent.stop="rightClick"
                            >
                              <div
                                class="time-text"
                                :class="{
                                  'full-moment':
                                    scope.row.timeMoment[index].full
                                }"
                              >
                                {{ item.time }}
                              </div>
                              <div
                                class="cover-bg-box"
                                v-for="(item3, index3) in scope.row.timeMoment[
                                  index
                                ].moment"
                                :key="index3"
                              >
                                <div
                                  class="cover-bg"
                                  :style="{
                                    width:
                                      (Math.abs(
                                        item3.mArea[1] - item3.mArea[0]
                                      ) /
                                        60) *
                                        100 +
                                      '%',
                                    left: (item3.mArea[0] / 60) * 100 + '%'
                                  }"
                                  v-if="item3.mArea"
                                  @click="selectTime(item3)"
                                ></div>
                                <div
                                  class="cover-bg"
                                  :style="{
                                    width: (Math.abs(item3.m) / 60) * 100 + '%',
                                    left: item3.m > 0 ? '0' : 'auto',
                                    right: item3.m < 0 ? '0' : 'auto'
                                  }"
                                  v-else
                                  @click="selectTime(item3)"
                                ></div>
                              </div>
                            </div>
                          </template>
                        </el-popover>
                        <div
                          class="time-item"
                          :class="{
                            active: false,
                            select:
                              userChooseTime[
                                `${userChooseDate.date} ${item.time}(${scope.row.roomName})`
                              ]
                          }"
                          @click="
                            chooseTime({
                              row: scope.row,
                              index,
                              item: userChooseDate,
                              item2: scope.row.timeMoment[index]
                            })
                          "
                          @contextmenu.prevent.stop="rightClick"
                          v-else
                        >
                          <div class="time-text">{{ item.time }}</div>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-show="chooseModel == 'week'">
              <el-table
                :data="calendarData"
                :border="true"
                :height="tableHeight"
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column
                  label=""
                  width="100"
                  :border="false"
                  :resizable="false"
                  fixed="left"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="room-name">{{ scope.row.roomName }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="item.mouthDay"
                  min-width="178"
                  v-for="(item, index) in weekList"
                  :resizable="false"
                  :key="item.date"
                >
                  <template slot="header" slot-scope="scope">
                    <div class="date-text">
                      <div class="before">{{ item.mouthDay }}/</div>
                      <div class="after">{{ item.week }}</div>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div class="cover-box">
                      <div
                        class="time-box"
                        :class="{ hide: scope.row.weekList[index].hide }"
                        v-if="scope.row.weekList"
                      >
                        <template
                          v-for="(item2, index2) in scope.row.weekList[index]"
                        >
                          <el-popover
                            placement="bottom"
                            trigger="click"
                            popper-class="time-popper"
                            :ref="
                              `weekPopper-${scope.row.roomName}-${index}-${index2}`
                            "
                            @show="showPopover"
                            @hide="hidePopover"
                            v-if="item2.moment.length"
                          >
                            <div class="time-detail">
                              <div class="detail-header">
                                <div class="left">
                                  {{
                                    selectItem.info && selectItem.info.roomName
                                  }}
                                </div>
                                <div
                                  class="right"
                                  @click="
                                    closePopper({
                                      key: `weekPopper-${scope.row.roomName}-${index}-${index2}`
                                    })
                                  "
                                >
                                  <i class="el-icon-close"></i>
                                </div>
                              </div>
                              <div class="detail-content">
                                <div class="text-ul">
                                  <div class="text-li">
                                    申请单位：{{
                                      (selectItem.info &&
                                        selectItem.info.belongOrgNames) ||
                                        "未填"
                                    }}
                                  </div>
                                  <div class="text-li">
                                    会议时间：{{ selectItem.t || "未填" }}
                                  </div>
                                  <div class="text-li">
                                    参与人数：{{
                                      (selectItem.info &&
                                        selectItem.info.meetingNumber) ||
                                        "未填"
                                    }}
                                  </div>
                                  <div class="text-li">
                                    联系人：{{
                                      (selectItem.info &&
                                        selectItem.info.linkUser) ||
                                        "未填"
                                    }}
                                  </div>
                                  <div class="text-li">
                                    联系电话：{{
                                      (selectItem.info &&
                                        selectItem.info.linkUserPhone) ||
                                        "未填"
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                            <template slot="reference">
                              <div
                                class="time-item"
                                :class="{
                                  active: false,
                                  select:
                                    userChooseTime[
                                      `${item.date} ${item2.time}(${scope.row.roomName})`
                                    ]
                                }"
                                @click="
                                  chooseTime({
                                    row: scope.row,
                                    index,
                                    index2,
                                    item: item,
                                    item2: item2
                                  })
                                "
                                @contextmenu.prevent.stop="rightClick"
                              >
                                <div
                                  class="time-text"
                                  :class="{ 'full-moment': item2.full }"
                                >
                                  {{ item2.time }}
                                </div>
                                <div
                                  class="cover-bg-box"
                                  v-for="(item3, index3) in item2.moment"
                                  :key="index3"
                                >
                                  <div
                                    class="cover-bg"
                                    :style="{
                                      width:
                                        (Math.abs(
                                          item3.mArea[1] - item3.mArea[0]
                                        ) /
                                          60) *
                                          100 +
                                        '%',
                                      left: (item3.mArea[0] / 60) * 100 + '%'
                                    }"
                                    v-if="item3.mArea"
                                    @click="selectTime(item3)"
                                  ></div>
                                  <div
                                    class="cover-bg"
                                    :style="{
                                      width:
                                        (Math.abs(item3.m) / 60) * 100 + '%',
                                      left: item3.m > 0 ? '0' : 'auto',
                                      right: item3.m < 0 ? '0' : 'auto'
                                    }"
                                    v-else
                                    @click="selectTime(item3)"
                                  ></div>
                                </div>
                              </div>
                            </template>
                          </el-popover>
                          <div
                            class="time-item"
                            :class="{
                              active: false,
                              select:
                                userChooseTime[
                                  `${item.date} ${item2.time}(${scope.row.roomName})`
                                ]
                            }"
                            @click="
                              chooseTime({
                                row: scope.row,
                                index,
                                index2,
                                item: item,
                                item2: item2
                              })
                            "
                            @contextmenu.prevent.stop="rightClick"
                            v-else
                          >
                            <div class="time-text">{{ item2.time }}</div>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
      <div class="calendar-box-right"></div>
      <vue-context-menu
        :contextMenuData="contextMenuData"
        @creatDaily="creatDaily"
        @creatFormal="creatFormal"
        @creatMetting="creatMetting"
      ></vue-context-menu>
    </div>
  </div>
</template>

<script>
import moment from "@/libs/moment.js";
import _ from "lodash";
import Template from "../../modules/index/system/template.vue";
import { Container } from "element-ui";
let weekFillter = {
  1: "周一",
  2: "周二",
  3: "周三",
  4: "周四",
  5: "周五",
  6: "周六",
  7: "周日"
};
export default {
  name: "WorkspaceJsonMeetcalendar",

  components: { Template },

  directives: {},
  props: {
    title: {
      default: "会议统计"
    },
    // api获取的周数据
    weekData: {
      type: [Array, Object],
      default: function() {
        return [];
      }
    },
    // api获取的会议室列表
    meetRoom: {
      type: [Array, Object],
      default: function() {
        return [];
      }
    },
    // api 获取的日数据
    dayData: {
      type: [Array, Object],
      default: function() {
        return [];
      }
    },
    // loading
    loading: {
      type: [Boolean,Number],
      default: false
    }
  },
  data() {
    return {
      // 用户选择的时间
      userChooseTime: {},
      // 选择器值
      pickerValue: "",
      // 当前日期
      currentDate: {},
      // 当前moment
      currentMoment: {},
      // 周数据
      weekList: [],
      // 天数据
      dayList: [],
      // 用户操作日期
      userChooseDate: {},
      // 用户操作moment
      userChooseMoment: {},
      // 搜索关键词
      keyword: "",
      modelList: [
        {
          text: "日",
          model: "date"
        },
        {
          text: "周",
          model: "week"
        }
      ],
      chooseModel: "week",
      calendarData: [],
      // 每天日程数据
      exData: [
        {
          time: "08:00",
          moment: [],
          h: 8,
          s: "08:00",
          e: "09:00"
        },
        {
          time: "09:00",
          moment: [],
          h: 9,
          s: "09:00",
          e: "10:00"
        },
        {
          time: "10:00",
          moment: [],
          h: 10,
          s: "10:00",
          e: "11:00"
        },
        {
          time: "11:00",
          moment: [],
          h: 11,
          s: "11:00",
          e: "12:00"
        },
        {
          time: "12:00",
          moment: [],
          h: 12,
          s: "12:00",
          e: "13:00"
        },
        {
          time: "13:00",
          moment: [],
          h: 13,
          s: "13:00",
          e: "14:00"
        },
        {
          time: "14:00",
          moment: [],
          h: 14,
          s: "14:00",
          e: "15:00"
        },
        {
          time: "15:00",
          moment: [],
          h: 15,
          s: "15:00",
          e: "16:00"
        },
        {
          time: "16:00",
          moment: [],
          h: 16,
          s: "16:00",
          e: "17:00"
        },
        {
          time: "17:00",
          moment: [],
          h: 17,
          s: "17:00",
          e: "18:00"
        },
        {
          time: "18:00",
          moment: [],
          h: 18,
          s: "18:00",
          e: "19:00"
        },
        {
          time: "19:00",
          moment: [],
          h: 19,
          s: "19:00",
          e: "20:00"
        }
      ],
      selectItem: {},
      // 操作菜单
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "creatDaily", // Binding events(绑定事件)
            icoName: "el-icon-news", // icon (icon图标 )
            btnName: "添加日常会议" // The name of the menu option (菜单名称)
          },
          {
            fnHandler: "creatFormal",
            icoName: "el-icon-copy-document",
            btnName: "添加正式会议"
          },
          {
            fnHandler: "creatMetting",
            icoName: "el-icon-s-order",
            btnName: "会议室申请"
          }
        ]
      },
      // 弹框显隐
      popoverStatus: false,
      // 表格高度
      tableHeight: null
      // dayTime: ['08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']
    };
  },
  computed: {
    cUserChooseTime() {
      let arr = [];
      for (let item in this.userChooseTime) {
        if (this.userChooseTime[item]) {
          let num = 0;
          for (let i = 0; i < arr.length; i++) {
            if (this.userChooseTime[item].h < arr[i].h) {
              arr.unshift(this.userChooseTime[item]);
              num++;
              break;
            }
          }
          if (num != 0) {
            continue;
          }
          arr.push(this.userChooseTime[item]);
        }
      }
      return arr;
    }
  },
  watch: {
    weekData(val) {
      this.computeWeekList(val);
    },
    dayData(val) {
      this.computeDayList(val);
    }
  },
  mounted() {
    this.init();
  },

  methods: {
    // 初始化
    init() {
      this.getCurrentDate();
      this.getWeekDate(this.userChooseMoment);
      this.getDayData();
      this.emitDay();
      this.getPageHeight();
    },
    // 获取表格高度
    getPageHeight() {
      let pageHeight = window.innerHeight;
      this.tableHeight = pageHeight - 152 - 58;
    },
    // 关闭弹框
    closePopper(obj = {}) {
      let { key } = obj;
      this.$refs[key][0].showPopper = false;
    },
    // 弹框显示隐藏
    showPopover() {
      this.popoverStatus = true;
    },
    hidePopover() {
      this.selectItem = {};
      this.popoverStatus = false;
    },
    // 右键点击事件
    rightClick(e) {
      // console.log(e);
      let { clientX, clientY, target } = e;
      let { className } = target;
      if (className.indexOf("select") == -1) {
        return;
      }
      this.contextMenuData.axis = {
        x: clientX,
        y: clientY
      };
    },
    // 添加日常会议
    creatDaily() {
      this.$store.commit("UPDATA_USER_CHOOSE_TIME", this.cUserChooseTime);
      this.$router.push({ name: "daily", query: { type: "calendar" } });
    },
    // 添加正式会议
    creatFormal() {
      this.$store.commit("UPDATA_USER_CHOOSE_TIME", this.cUserChooseTime);
      this.$router.push({ name: "formal", query: { type: "calendar" } });
    },
    // 添加会议申请
    creatMetting() {
      this.$store.commit("UPDATA_USER_CHOOSE_TIME", this.cUserChooseTime);
      this.$router.push({ name: "occupy", query: { type: "calendar" } });
    },
    // 日期选择
    changePicker(val) {
      this.pickerValue = val;
      if (this.chooseModel == "week") {
        let week = moment(val).isoWeeks();
        let num = week - this.userChooseDate.week;
        this.timeChange(num);
      } else if (this.chooseModel == "date") {
        let day = moment(val).dayOfYear();
        let num = day - this.userChooseDate.day;
        this.timeChange(num);
      }
    },
    // 搜索
    search() {
      if (!this.keyword) {
        this.emitDay();
        return;
      }
      let obj = {
        model: this.chooseModel,
        keyword: this.keyword
      };
      Object.assign(obj, this.userChooseDate);
      this.$emit("search", obj);
    },
    // 清除选中数据
    clearSelect() {
      // this.selectItem = {}
    },
    // 用户操作某一个时间
    chooseTime(obj = {}) {
      let copyObj = _.cloneDeep(obj);
      // console.log(copyObj);
      let { item, item2, row } = copyObj;
      let { date } = item;
      let { time, moment } = item2;
      let itemTimeS = new Date(item.date).getTime();
      // 判断是否是连续时间段
      let continuity = true;
      if (this.cUserChooseTime.length) {
        continuity = false;
      }
      for (let i = 0; i < this.cUserChooseTime.length; i++) {
        let timeNum = parseInt(this.cUserChooseTime[i].time);
        // 判断是否是同一天
        if (this.cUserChooseTime[i].date != item.date) {
          let timeS = new Date(this.cUserChooseTime[i].date);
          if (timeS > itemTimeS) {
            timeNum += 24;
          } else {
            timeNum -= 24;
          }
        }
        let sum = Math.abs(timeNum - item2.h);
        if (sum <= 1) {
          continuity = true;
        }
        if (this.cUserChooseTime[i].roomName != row.roomName) {
          this.$message("请选择同一个房间的连续时间段");
          return;
        }
      }
      if (!continuity) {
        this.$message("请选择同一个房间的连续时间段");
        return;
      }
      if (moment.length) {
        this.$message("这个时间段已被占用");
        return;
      }
      let cDate = `${date} ${time}(${row.roomName})`;
      if (this.userChooseTime[cDate]) {
        this.$set(this.userChooseTime, cDate, false);
        return;
      }
      let chooseObj = {
        date: item.date,
        time: item2.time,
        dateTime: `${item.date} ${item2.time}`,
        roomName: row.roomName,
        s: item2.s,
        e: item2.e,
        h: item2.h
      };
      this.$set(this.userChooseTime, cDate, chooseObj);
    },
    // 点击选择某一个时间
    selectTime(item = {}) {
      this.selectItem = _.cloneDeep(item);
      if (item.info) {
        setTimeout(() => {
          this.selectItem = _.cloneDeep(item);
        }, 100);
      }
    },
    // 获取初始化时间数据
    getCurrentDate() {
      this.userChooseMoment = this.currentMoment = moment();
      this.pickerValue = this.currentDate.date = this.currentMoment.format(
        "YYYY-MM-DD"
      );
      this.currentDate.week = this.getCurrentWeek();
      this.currentDate.year = this.getCurrentYear();
      this.currentDate.day = this.currentMoment.dayOfYear();
      this.userChooseDate = _.cloneDeep(this.currentDate);
    },
    // 获取某一天
    getDayData() {
      this.dayList = _.cloneDeep(this.exData);
    },
    // 获取某个周
    getWeekDate(moment) {
      let obj = _.cloneDeep(moment);
      let arr = [];
      for (let i = 0; i < 7; i++) {
        arr.push({
          date: obj.isoWeekday(i + 1).format("YYYY-MM-DD"),
          mouthDay: obj.isoWeekday(i + 1).format("MM-DD"),
          week: weekFillter[i + 1],
          roomInfo: {},
          timeMoment: {}
        });
      }
      this.weekList = arr;
      return arr;
    },
    // 获取某个月
    getMouthDate(moment) {},
    // 获取当前第几周
    getCurrentWeek() {
      let currentWeek = this.currentMoment.isoWeeks();
      return currentWeek;
    },
    // 获取当前年份
    getCurrentYear() {
      let currentYear = this.currentMoment.year();
      return currentYear;
    },
    // 抛出用户选择的时间
    emitDay() {
      if (this.keyword) {
        this.search();
        return;
      }
      let obj = {
        model: this.chooseModel
      };
      Object.assign(obj, this.userChooseDate);
      this.$emit("emitDay", obj);
    },
    // 切换周/天
    timeChange(num) {
      if (this.chooseModel == "date") {
        let sum = this.userChooseDate.day + num;
        this.userChooseMoment.dayOfYear(sum);
      }
      if (this.chooseModel == "week") {
        let sum = this.userChooseDate.week + num;
        this.userChooseMoment.isoWeeks(sum);
        this.getWeekDate(this.userChooseMoment);
      }
      this.userChooseDate.day = this.userChooseMoment.dayOfYear();
      this.userChooseDate.week = this.userChooseMoment.isoWeeks();
      this.pickerValue = this.userChooseDate.date = this.userChooseMoment.format(
        "YYYY-MM-DD"
      );
      this.userChooseDate.mouthDay = this.userChooseMoment.format("MM-DD");

      this.emitDay();
    },
    // 切换模式
    changeModel(item) {
      if (item.model == "mouth") {
        this.$message("月份暂未开发");
        return;
      }
      if (item.model == this.chooseModel) {
        return;
      }
      this.chooseModel = item.model;
      if (item.model == "week") {
        this.getWeekDate(this.userChooseMoment);
      }
      // this.userChooseDate.day = this.userChooseMoment.weeks(this.userChooseDate.week).dayOfYear();
      // this.userChooseDate.week = this.userChooseMoment.dayOfYear(this.userChooseDate.day).weeks();
      this.emitDay();
    },
    // 切换天
    dayChange() {},
    // 拿取到日数据后进行循环处理数据
    computeDayList(dayData) {
      this.calendarData = _.cloneDeep(this.meetRoom);
      for (let item in dayData) {
        // console.log(item)
        for (let n = 0; n < this.calendarData.length; n++) {
          if (this.calendarData[n].roomName == item) {
            this.calendarData[n].timeMoment = this.computeTimeMoment(
              dayData[item]
            );
          }
        }
      }
    },
    // 拿取到周数据后进行循环处理数据
    computeWeekList(weekData) {
      // this.calendarData = [];
      this.calendarData = _.cloneDeep(this.meetRoom);
      for (let item in weekData) {
        this.weekList[item].weekData = weekData[item];
        for (let item2 in weekData[item]) {
          let forItem = weekData[item];
          // console.log(forItem[item2]);
          this.weekList[item].roomInfo[item2] = forItem[item2];
          this.weekList[item].timeMoment[item2] = this.computeTimeMoment(
            forItem[item2]
          );
          if (!forItem[item2].length) {
            this.weekList[item].timeMoment[item2].hide = true;
          }
          for (let i = 0; i < this.calendarData.length; i++) {
            // console.log(this.weekList[item].timeMoment,this.calendarData[i].title,this.weekList[item].timeMoment[this.calendarData[i].title])
            if (this.calendarData[i].roomName == item2) {
              if (!this.calendarData[i].weekList) {
                this.calendarData[i].weekList = [];
              }
              this.calendarData[i].weekList.push(
                this.weekList[item].timeMoment[item2]
              );
            }
          }
        }
      }
      // console.log(this.weekList, this.calendarData);
    },
    // 根据时间段添加数据
    computeTimeMoment(arr = []) {
      let timeMoment = _.cloneDeep(this.exData);
      // console.log(arr);
      for (let i = 0; i < arr.length; i++) {
        let start = {
          h: moment(arr[i].startTime).get("h"),
          m: moment(arr[i].startTime).get("m"),
          s: moment(arr[i].startTime).get("s"),
          t: moment(arr[i].startTime).format("HH:mm")
        };
        let end = {
          h: moment(arr[i].endTime).get("h"),
          m: moment(arr[i].endTime).get("m"),
          s: moment(arr[i].endTime).get("s"),
          t: moment(arr[i].endTime).format("HH:mm")
        };
        // console.log(start,end)
        for (let n = 0; n < timeMoment.length; n++) {
          if (timeMoment[n].h < start.h) {
            continue;
          }
          if (timeMoment[n].h == start.h && timeMoment[n].h == end.h) {
            timeMoment[n].moment.push({
              m: 0,
              mArea: [start.m, end.m],
              info: arr[i],
              t: `${start.t} ~ ${end.t}`
            });
            continue;
          }
          if (timeMoment[n].h == start.h) {
            timeMoment[n].moment.push({
              m: -60 + start.m,
              info: arr[i],
              t: `${start.t} ~ ${end.t}`
            });
            continue;
          }

          if (timeMoment[n].h < end.h) {
            timeMoment[n].moment.push({
              m: 60,
              info: arr[i],
              t: `${start.t} ~ ${end.t}`,
              full: true
            });
            continue;
          }
          if (timeMoment[n].h == end.h) {
            if (end.m <= 0) {
              continue;
            }
            timeMoment[n].moment.push({
              m: end.m,
              info: arr[i],
              t: `${start.t} ~ ${end.t}`
            });
          }
        }
        for (let c = 0; c < timeMoment.length; c++) {
          let m = 0;
          for (let v = 0; v < timeMoment[c].moment.length; v++) {
            m += Math.abs(timeMoment[c].moment[v].m);
          }
          if (m >= 60) {
            timeMoment[c].full = true;
          }
        }
      }
      return timeMoment;
    }
  }
};
</script>
<style lang="scss">
.time-popper {
  padding: 0;
  // overflow: hidden;
}
.calendar-date-pick {
  // display: block !important;
}
</style>
<style lang="scss" scoped>
.calendar-box {
  /deep/ .el-card__header {
    height: 58px;
    padding: 0 20px;
  }
  /deep/ .el-card__body {
    padding: 0 10px;
  }
  /deep/ th {
    border: none;
    padding: 0;
  }
  /deep/ thead > tr {
    height: 48px;
  }
  /deep/ thead > tr > th {
    border-bottom: 1px solid #ebeef5;
  }
  /deep/ .el-table {
    border-top: none;
  }
  /deep/ tr td:first-child {
    // border-right: none;
  }
  .clearfix {
    height: 100%;
    .calendar-header {
      height: 100%;
    }
  }
}
.time-detail {
  min-width: 270px;
  box-sizing: border-box;
  .detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 50px;
    color: #fff;
    background-color: #ff6808;
    padding: 0 15px;
    border-radius: 4px 4px 0 0;
    .left {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
    .right {
      font-size: 20px;
      cursor: pointer;
    }
  }
  .detail-content {
    padding: 14px 16px;
    .text-ul {
      .text-li + .text-li {
      }
      .text-li {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 28px;
        color: #333333;
      }
    }
  }
}
.calendar-content {
  /deep/ tbody td {
    padding: 0;
  }
  /deep/ tbody td .cell {
    padding: 0;
  }
  /deep/ tbody tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .room-name {
    text-align: center;
    user-select: none;
  }

  // .hide {
  //   visibility: hidden;
  // }
  .cover-box:hover {
    .time-box {
      background-color: #f5f7fa;
      visibility: visible;
      .time-text {
        color: #333;
      }
      .time-item {
      }
    }
  }
  .time-box {
    transition: all 0.3s;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    > span {
      flex: 1 0 25%;
    }
    .time-item.active {
      .cover-bg {
        background-color: #ff6808;
      }
      .time-text {
        color: #fff;
      }
    }
    .time-item.select {
      background-color: green;
      border: none;
      .time-text {
        color: #fff;
      }
    }
    .time-item {
      cursor: pointer;
      flex: 1 0 25%;
      line-height: 37px;
      text-align: center;
      border: 1px dashed #ebeef5;
      border-top: none;
      border-left: none;
      position: relative;
      border-collapse: collapse;
      box-sizing: border-box;
      .time-text {
        position: relative;
        z-index: 2;
        user-select: none;
        pointer-events: none;
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #99b4ca;
      }
      .full-moment.time-text {
        color: #fff;
      }
      .cover-bg {
        cursor: pointer;
        position: absolute;
        z-index: 1;
        top: 0;
        height: 100%;
        background-color: #ff6808;
      }
    }
  }
  .date-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;

    .before {
      font-weight: normal;
      color: #333333;
    }
    .after {
      margin-left: 3px;
      font-weight: normal;
      color: #99b4ca;
    }
  }
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 27px;
    color: #333333;
  }
  .right-search {
    .search-box {
      border-radius: 30px;
      background-color: #f4faff;
      width: 220px;
      height: 36px;
      .search-inner {
        display: flex;
        align-items: center;
        padding-right: 10px;
        .left {
          /deep/ .el-input {
            width: auto;
          }
          /deep/ .el-input .el-input__inner {
            border: none;
            background-color: rgba(0, 0, 0, 0);
          }
        }
        .right {
          cursor: pointer;
          .el-icon-search {
            color: #409eff;
          }
        }
      }
    }
  }
  .time-model-box {
    display: flex;
    align-items: center;
    .model-li.active {
      color: #0075ff;
    }
    .model-li {
      background-color: #f4faff;
      border-radius: 6px;
      // padding: 8px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0 5px;
      cursor: pointer;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #99b4ca;
    }
  }
  .time-change-box {
    display: flex;
    align-items: center;
    .change-text {
      padding: 0 14px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #99b4ca;
    }
    .change-btn {
      background: #f4faff;
      border-radius: 6px;
      cursor: pointer;
      width: 28px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #0075ff;
    }
  }
}
</style>
